import 'package:flutter/material.dart';

// 计数器
// 定义一个动态组件
class MyHomePage extends StatefulWidget {
  // 固定写法,对当前类进行重写。 可以用来接收参数，使用类的无参变有参
  // @required表示 必填项
  MyHomePage({Key key, @required this.title}) : super(key: key);
  final title;

  // 每一个动态组件当中都需要一个createState函数, state就是我们要管理的状态
  @override
  // 系统提供的 createState 函数，返回值是一个 _MyHomePageState的实例，
  // 前面定义返回值的类型，写_MyHomePageState
  _MyHomePageState createState() => _MyHomePageState();
}

// 定义一个状态控制器，
// 命名规范：下划线开头 + 被管理组件名称 + State
// 在 State 后面的尖括号里写入被管理的组件名
class _MyHomePageState extends State<MyHomePage> {
  // 定义变量 _counter，他是一个私有变量
  int _counter = 0;
  
  // 定义自增函数，每次调用_counter+1, 然后使用setState渲染到页面当中
  _incrementCounter(){
    setState(() {
      _counter++;
    });
  }

  // 必须传入一个 build函数，用来渲染被管理组件的UI结构
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // widget表示被管理的有状态组件，widget.XXX 接收定义的参数
        title: Text('${widget.title}'),
      ),
      body: Center(
        // Column代表 从上到下排列组件
        // Row代表 从左到右排列组件
        child: Column(
          // 这里面会有一个轴坐标 main代表主轴
          // 在主轴上 居中分布
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              // 调整字体大小
              // 向上寻找祖先的组件
              // style: TextStyle(
              //   fontSize: 35,
              //   color: Colors.grey
              // ),
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        // 长按提示
        tooltip: 'increasement',
        // 添加图标
        child: Icon(Icons.add),
        // 添加点击效果
        onPressed: (){
          _incrementCounter();
        },
      ),

    );
  }
}
